<template>
<!-- 这是专题页面 -->

    <div class="index-container">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
            <p>刷新次数: {{ count }}</p>
        </van-pull-refresh>
        <!-- 头部 -->
        <header>
            <van-nav-bar
                title="专题"
                z-index="10"
            />
             <van-icon name="chat-o" class="iconfont icon-liebiaoshunxu"  @click="show = true"/>
             <span ></span>
             <!-- 点击有个列表，下面有排序事件 -->
        </header>
        <!-- 遮罩 - 排序列表 -->
        <van-overlay :show="show" @click="show = false">
            <!-- <div class="wrapper" @click.stop>
                <div class="block" />
            </div> -->
            <ul class="zhezhao-ul" @click.stop z-index="10">
                <!-- 尝试跳转管理收货地址 -->
                <li @click="toaddress()">最新发布</li>
                <li>最热推介</li>
            </ul>
        </van-overlay>
        
        <!-- 遮罩层 -->
        <van-overlay :show="show" @click="show = false" class="zhezhao" z-index="9"/>
        
      <!-- tab切换 -->
        <van-tabs v-model="active" 
            color="#B81F3E"
            title-active-color="#B81F3E"
            line-width="27px"
            class="SP-tabs"
        >
        
            <!-- 主要内容1 - 全部 -->
            <van-tab title="全部">
                <lazy-component v-for="(item,index) in imageList" :key="index" class="lazy-one">
                    <img v-lazy="item.img" class="Special-Lazy" />
                    <p class="lazyone-p">{{item.title}}</p>
                    <div class="lazyone-iconwrap">
                       <van-icon name="chat-o" class="iconfont icon-liulan" />
                       <!-- vant里面用name去改图标样式，详见vant,这里要添加点击事件 -->
                       <span class="lazyone-spanone">78</span>
                       <span class="lazyone-spantwo">|</span>
                        <van-icon class="iconfont icon-aixin" @click="liulang" /> 
                        <span class="lazyone-spanthere">{{num}}</span>
                    </div>                   
                </lazy-component>
            </van-tab>

            <!-- 主要内容2 - 特辑推介 -->
            <van-tab title="特辑推介">
                <lazy-component v-for="(item,index) in imageList" :key="index" class="lazy-one">
                    <img v-lazy="item.img" class="Special-Lazy" />
                    <p class="lazyone-p">{{item.title}}</p>
                    <div class="lazyone-iconwrap">
                       <van-icon name="chat-o" class="iconfont icon-liulan" />
                       <!-- vant里面用name去改图标样式，详见vant,这里要添加点击事件 -->
                       <span class="lazyone-spanone">78</span>
                       <span class="lazyone-spantwo">|</span>
                        <van-icon
                            class="iconfont icon-aixin"  @click="liulang" /> 
                        <span class="lazyone-spanthere">{{num}}</span>
                    </div>                   
                </lazy-component>
            </van-tab>

            <!-- 主要内容3 - 好物优选 -->
            <van-tab title="好物优选">
                 <lazy-component v-for="(item,index) in imageList" :key="index" class="lazy-one">
                    <img v-lazy="item.img" class="Special-Lazy" />
                    <p class="lazyone-p">{{item.title}}</p>
                    <div class="lazyone-iconwrap">
                       <van-icon name="chat-o" class="iconfont icon-liulan" />
                       <!-- vant里面用name去改图标样式，详见vant,这里要添加点击事件 -->
                       <span class="lazyone-spanone">78</span>
                       <span class="lazyone-spantwo">|</span>
                        <van-icon class="iconfont icon-aixin" @click="liulang" /> 
                        <span class="lazyone-spanthere">{{num}}</span>
                    </div>                   
                </lazy-component>
            </van-tab>

            <!-- 主要内容4 - 爱小厨 -->
            <van-tab title="爱小厨">
                 <lazy-component v-for="(item,index) in imageList" :key="index" class="lazy-one">
                    <img v-lazy="item.img" class="Special-Lazy" />
                    <p class="lazyone-p">{{item.title}}</p>
                    <div class="lazyone-iconwrap">
                       <van-icon name="chat-o" class="iconfont icon-liulan" />
                       <!-- vant里面用name去改图标样式，详见vant,这里要添加点击事件 -->
                       <span class="lazyone-spanone">78</span>
                       <span class="lazyone-spantwo">|</span>
                        <van-icon class="iconfont icon-aixin" @click="liulang" /> 
                        <span class="lazyone-spanthere">{{num}}</span>
                    </div>                   
                </lazy-component>
            </van-tab>

            <!-- 主要内容5 - 精选菜单 -->
             <van-tab title="精选菜单">
                  <div class="selected-mainwrap">
                      <!-- 投稿 -->
                      <div class="selected-Contribution">
                          <div class="selected-Contribution-p1">如何向我们投稿</div>
                          <div class="selected-Contribution-spanwrap">
                              <p class="selected-Contribution-span">对生活的向往，用ABS的好物来表达！马上 晒出你手边的ABS好物，点亮生活无限创意 。一起来投稿吧！</p>
                          </div>
                          <div class="selected-Contribution-evaluate">带图去评价</div>
                      </div>
                      <!-- 瀑布图 -->
                      <div class="selected-pubuImgWrap">
                           <div class="selected-pubuImg" v-for="(item,index) in pubuList" :key="index">
                              <img :src="item.pubImg" alt="" class="selected-pubuImg-img">
                              <div class="selected-pubuImg-lispan">{{item.pubTitle}}</div>
                              <ul>
                                  <li class="selected-pubuImg-list">
                                      <img :src="item.pubImg2" alt="" class="selected-pubuImg-headPortrait">
                                      <span class="selected-pubuImg-name">{{item.titleName}}</span>
                                  </li>
                                  
                                  <li>
                                      <span class="iconfont icon-aixin"></span>
                                      <span class="selected-pubuImg-number">{{item.pubNum}}</span>
                                  </li>
                                  
                              </ul>
                          </div>
                            
                      </div>
                  </div>
                   
             </van-tab>
        </van-tabs>
   

    </div>
</template>
<script>
import '../../assets/style/style.css';

export default {
      data() {
        return {
        active: 2,
            imageList: [
            // 'https://img.yzcdn.cn/vant/apple-1.jpg',
            // 'https://img.yzcdn.cn/vant/apple-2.jpg',
            {
                img:'https://img.yzcdn.cn/vant/apple-1.jpg',
                title:'aaa'
            },
            {
                img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                title:'bbb'
            },
            {
                img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                title:'bbb'
            },
            {
                img:'https://img.yzcdn.cn/vant/apple-2.jpg',
                title:'bbb'
            }
        ],
        pubuList:[
            {
                pubImg:'https://img.yzcdn.cn/vant/apple-1.jpg',
                pubImg2:'https://img.yzcdn.cn/vant/apple-2.jpg',
                titleName: '九亿少女的梦',
                pubTitle:'哇塞！有了它真的方便，在家也可以做蛋挞烤鸡翅，真的是超值的哦！',
                pubNum:'0'
            },
             {
                pubImg:'https://img.yzcdn.cn/vant/apple-1.jpg',
                pubImg2:'https://img.yzcdn.cn/vant/apple-2.jpg',
                titleName: '九亿少女的梦',
                pubTitle:'aaa',
                pubNum:'0'
            },
             {
                pubImg:'https://img.yzcdn.cn/vant/apple-1.jpg',
                pubImg2:'https://img.yzcdn.cn/vant/apple-2.jpg',
                titleName: '九亿少女的梦',
                pubTitle:'aaa',
                pubNum:'0'
            },
             {
                pubImg:'https://img.yzcdn.cn/vant/apple-1.jpg',
                pubImg2:'https://img.yzcdn.cn/vant/apple-2.jpg',
                titleName: '九亿少女的梦',
                pubTitle:'aaa',
                pubNum:'0'
            },
        ],
        show: false,
        num:0,
        count: 0,
        isLoading: false,
        
        };
    },
    methods: {
        liulang(){
            // 需要判断是不是本人点击
            this.num++;
        },
        toaddress(){
            this.$router.push('/MSaddress')
        },
        onRefresh() {
            setTimeout(() => {
                Toast('刷新成功');
                this.isLoading = false;
                this.count++;
            }, 1000);
        },
    },
}
</script>
<style lang="stylus">


</style>